<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="panel_grid" :style="gridStyleVal" ></div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, watch, onMounted } from "vue";
import { storeToRefs } from "pinia";// 引入pinia
import { useEditorStore } from "../../store"; // 引入存储
const myStore = useEditorStore(); // 使用存储
let { canvasAttr } = storeToRefs(myStore);//解构-画布

/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
/** 格栅样式值*/
let gridStyleVal = ref('')

/* ================================================================================================ */
//                                局部函数
/* ================================================================================================ */

/** 初始化样式 */
const onInitStyle = () => {
  // console.log("初始化格栅");

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 画布背景颜色 */
  let canvasBackColor = String(myStore.canvasAttr.canvasBackColor);
  /** 画布缩放 */
  let canvasScale = Number(myStore.canvasAttr.canvasScale);
  /** 画布宽度 */
  let canvasWidth = Number(myStore.canvasAttr.canvasWidth);
  /** 画布高度 */
  let canvasHeight = Number(myStore.canvasAttr.canvasHeight);
  /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
  let gridModel = Number(myStore.canvasAttr.gridModel);
  /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
  let gridStyle = Number(myStore.canvasAttr.gridStyle);
  /** 格栅间距 */
  let gridSpace = Number(myStore.canvasAttr.gridSpace);
  /** 格栅点颜色 */
  let gridDotColor = String(myStore.canvasAttr.gridDotColor);
  /** 小格颜色 */
  let gridColorMini = String(myStore.canvasAttr.gridColorMini);
  /** 大格颜色 */
  let gridColorMax = String(myStore.canvasAttr.gridColorMax);
  /** 格栅宽度 */
  let gridWidth = Number(myStore.canvasAttr.gridWidth);
  /** 格栅宽度 */
  let gridHeight = Number(myStore.canvasAttr.gridHeight);

  // 无
  if (gridModel === 1 /*无格栅*/) {
    gridStyleVal.value = `position: absolute; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale
      }px; height:${canvasHeight * canvasScale}px;z-index: 1;`;
  }

  // 点格栅
  if (gridModel === 2 /*点格栅*/) {
    gridStyleVal.value = `position: absolute;width: ${canvasWidth * canvasScale}px;height:${canvasHeight * canvasScale}px;background:${canvasBackColor};background-image:linear-gradient(${canvasBackColor} ${gridSpace * canvasScale - 1}px,transparent 0),linear-gradient(90deg,${gridDotColor} 1px,transparent 0);background-size:${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * canvasScale}px ${gridSpace * canvasScale}px;z-index: 1;`;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 格栅模式选项:3-方格;
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (gridModel === 3 /*方格*/) {
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:1-像素尺寸;
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (gridStyle == 1/*像素尺寸*/) {
      gridStyleVal.value = `position: absolute; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale
        }px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * 10 * canvasScale}px ${gridSpace * 10 * canvasScale}px,${gridSpace * 10 * canvasScale}px ${gridSpace * 10 * canvasScale}px;z-index: 1;`;
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:3-均分画布;
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (gridStyle == 2/*均分画布*/) {
      gridStyleVal.value = `position: absolute; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale
        }px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px;z-index: 1;`;
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:3-按宽高均分画布;
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (gridStyle == 3/*按宽高均分画布*/) {
      gridStyleVal.value = `position: absolute; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale
        }px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px;z-index: 1;`;
    }
  }
};

/* ================================================================================================ */
//                                钩子函数_挂载后 ★
/* ================================================================================================ */
onMounted(() => {
  // console.log("钩子函数_挂载后");
  onInitStyle(); //初始化样式
});
/* ================================================================================================ */
//                                监听 ★
/* ================================================================================================ */

//监听-画布
watch(
  () => canvasAttr.value,
  () => {
    // console.log("监听-画布");
    onInitStyle(); //初始化样式
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
// 格栅
.panel_grid {
  position: absolute;
  top: 0px;
  left: 0px;
  user-select: none;
}

// SVG包
</style>
